<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>鼠标粒子跟随</title>

    <style>
        body{
            margin: 0;
            padding: 0;
            overflow: hidden;
        }

        canvas {
            display: block;
        }
    </style>
</head>

<body>
    <canvas id="canvas"></canvas>
</body>


<script>
    const canvase = document.getElementById("canvas");
    const ctx = canvase.getContext('2d');

    canvase.width = window.innerWidth;
    canvase.height = window.innerHeight;

    class Particle {
        constructor(x,y) {
            this.x = x;
            this.y = y;
            this.vx = Math.random() * 2 -1;
            this.vy = Math.random() * 2 -1;

            this.ax= 0;
            this.ay = 0;

            this.color = `rgba(${Math.floor(Math.random()*256)},${Math.floor(Math.random()*256)},${Math.floor(Math.random()*256)},${Math.random()})`;
            this.size = 4;
            this.life = 300;
        }

        draw() {
            ctx.fillStyle = this.color;
            ctx.beginPath();
            ctx.arc(this.x,this.y,this.size,0,Math.PI*2);
            ctx.closePath();
            ctx.fill();
        }
    }

    class ParticleCollection {
        constructor() {
            this.particles = [];
            this.maxParticles = 300;
        }

        createParticles(x,y,count) {
            for (let i = 0; i<count; i++) {
                if (this.particles.length >= this.maxParticles) {
                    this.particles.shift();
                }

                const particle = new Particle(x,y);
                this.particles.push(particle);

                setTimeout(() => {
                    const index = this.particles.indexOf(particle);
                    if (index !== -1) {
                        this.particles.splice(index,1);
                    }
                },3000);
            }
        }

        updateParticles() {
            for (let i = 0; i < this.particles.length; i++) {
                const particle = this.particles[i];

                particle.vx += particle.ax;
                particle.vy += particle.ay;
                particle.x += particle.vx;
                particle.y += particle.vy;

                particle.life -= 1;

                if (particle.life <= 0) {
                    this.particles.splice(i,1);
                    i--;
                }
            }
        }

        drawParticles() {
            for (let i = 0; i < this.particles.length; i++) {
                const particle = this.particles[i];
                particle.draw();
            }
        }
    }

    const particleCollection = new ParticleCollection();

    canvase.addEventListener('mousemove',e => {
        
        particleCollection.createParticles(e.clientX,e.clientY,5)
    });

    function loop() {
        canvase.width = window.innerWidth;
        canvase.height = window.innerHeight;

        ctx.clearRect(0,0,canvase.width,canvase.height);

        particleCollection.updateParticles();
        particleCollection.drawParticles();

        requestAnimationFrame(loop);
    }

    loop();
</script>


</html>